<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>房源搜索</title>
  <link rel="stylesheet" th:href="@{/airent/plugins/bootstrap/bootstrap-4.4.1-dist/css/bootstrap.min.css}">
  <link rel="stylesheet" th:href="@{/airent/common/css/nav.css}">
  <link rel="stylesheet" th:href="@{/airent/css/searchhouse.css}">
  <link rel="stylesheet" th:href="@{/airent/common/css/footer.css}">
  <link rel="stylesheet" th:href="@{/airent/plugins/font-awesome-4.7.0/css/font-awesome.min.css}">
  <link rel="stylesheet" th:href="@{/airent/plugins/other/animate.min.css}" />
  <script th:src="@{/airent/js/vue.js}"></script>
  <style type="text/css">
    html {
      height: 100%
    }

    body {
      height: 100%;
      margin: 0px;
      padding: 0px
    }

    #container {
      width: 100%;
      height: 450px;
      border: #ccc solid 1px;
    }
  </style>
  <script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=nGGIg5o99yFrRmVRM5sgX9LUi39ObA3Y"></script>
</head>

<body>
<div id="app">
  <!--引入导航栏-->
  <div th:replace="~{head/topbar::topBar(activeUri = 'rent')}"></div>
  <div class="search-box col-md-12">
    <div class="search-input-box row">
      <div class="input-group animate__animated animate__fadeInUp col-md-6 offset-md-3">
        <input id="search-input" type="text" class="form-control" placeholder="请输入区域、地址开始找房" name="searchHouse" v-model="house.searchHouse"/>
        <span class="input-group-btn">
          <button id="search-button" class="btn btn-success animate__animated animate__pulse" type="button" @click="search()">开始找房</button>
        </span>
      </div>
    </div>
    <div class="search-check-continer row">
      <div class="col-md-10 col-md-1 search-check">
        <form action="">
          <div class="search-check-box col-md-10 offset-md-1" >
            <span id="area"><b>区域：</b></span>

            <div class="form-check form-check-inline" v-for="(area,index) in areas.slice(0,9)" >
              <input class="form-check-input" type="radio" name="houseArea" id="inlineradio1"  :value="area" v-model="house.houseArea"/>
              <label class="form-check-label" for="inlineradio1">{{area}}</label>
            </div>

            <!--有点烦，还要手动换行，有没有更简单的方法？？？-->
            <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <div class="form-check form-check-inline" v-for="(area,index) in areas.slice(9,18)">
              <input class="form-check-input" type="radio" name="houseArea" id="inlineradio2"  :value="area" v-model="house.houseArea"/>
              <label class="form-check-label" for="inlineradio1">{{area}}</label>
            </div>
            <!--有点烦，还要手动换行，有没有更简单的方法？？？-->
            <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <div class="form-check form-check-inline" v-for="(area,index) in areas.slice(18,27)">
              <input class="form-check-input" type="radio" name="houseArea" id="inlineradio3"  :value="area" v-model="house.houseArea"/>
              <label class="form-check-label" for="inlineradio1">{{area}}</label>
            </div>

          </div>
          <div class="search-check-box col-md-10 offset-md-1">
            <span><b>方式：</b></span>

            <div class="form-check form-check-inline">
              <input class="form-check-input" type="radio" name="rentType" id="inlineradio31" value="整租" v-model="house.rentType"/>
              <label class="form-check-label" for="inlineradio31">整租</label>
            </div>
            <div class="form-check form-check-inline">
              <input class="form-check-input" type="radio" name="rentType" id="inlineradio32" value="合租" v-model="house.rentType">
              <label class="form-check-label" for="inlineradio32">合租</label>
            </div>
          </div>

          <div class="search-check-box col-md-10 offset-md-1">
            <span><b>租金：</b></span>

            <div class="form-check form-check-inline">
              <input class="form-check-input" type="radio" name="rentPrice" id="inlineradio41" value="0" v-model="house.rentPrice"/>
              <label class="form-check-label" for="inlineradio41">≤1000元</label>
            </div>
            <div class="form-check form-check-inline">
              <input class="form-check-input" type="radio" name="rentPrice" id="inlineradio42" value="1000" v-model="house.rentPrice"/>
              <label class="form-check-label" for="inlineradio42">1000-2000元</label>
            </div>
            <div class="form-check form-check-inline">
              <input class="form-check-input" type="radio" name="rentPrice" id="inlineradio43" value="2000" v-model="house.rentPrice"/>
              <label class="form-check-label" for="inlineradio43">2000-3000元</label>
            </div>
            <div class="form-check form-check-inline">
              <input class="form-check-input" type="radio" name="rentPrice" id="inlineradio44" value="3000" v-model="house.rentPrice"/>
              <label class="form-check-label" for="inlineradio44">3000-4000元</label>
            </div>
            <div class="form-check form-check-inline">
              <input class="form-check-input" type="radio" name="rentPrice" id="inlineradio45" value="4000" v-model="house.rentPrice"/>
              <label class="form-check-label" for="inlineradio45">4000-5000元</label>
            </div>
            <div class="form-check form-check-inline">
              <input class="form-check-input" type="radio" name="rentPrice" id="inlineradio46" value="5000" v-model="house.rentPrice"/>
              <label class="form-check-label" for="inlineradio46">&ge;5000元</label>
            </div>
          </div>

          <div class="search-check-box col-md-10 offset-md-1">
            <span><b>户型：</b></span>

            <div class="form-check form-check-inline">
              <input class="form-check-input" type="radio" name="houseTypeId" id="inlineradio51" value="一室" v-model="house.houseTypeId"/>
              <label class="form-check-label" for="inlineradio51">一室</label>
            </div>
            <div class="form-check form-check-inline">
              <input class="form-check-input" type="radio" name="houseTypeId" id="inlineradio52" value="两室" v-model="house.houseTypeId"/>
              <label class="form-check-label" for="inlineradio52">两室</label>
            </div>
            <div class="form-check form-check-inline">
              <input class="form-check-input" type="radio" name="houseTypeId" id="inlineradio53" value="三室" v-model="house.houseTypeId"/>
              <label class="form-check-label" for="inlineradio53">三室</label>
            </div>
            <div class="form-check form-check-inline">
              <input class="form-check-input" type="radio" name="houseTypeId" id="inlineradio54" value="四室" v-model="house.houseTypeId"/>
              <label class="form-check-label" for="inlineradio54">四室</label>
            </div>
          </div>
          <div class="search-check-box col-md-10 offset-md-1">
            <span><b>朝向：</b></span>

            <div class="form-check form-check-inline">
              <input class="form-check-input" type="radio" name="orientation" id="inlineradio61" value="东" v-model="house.orientation"/>
              <label class="form-check-label" for="inlineradio61">东</label>
            </div>
            <div class="form-check form-check-inline">
              <input class="form-check-input" type="radio" name="orientation" id="inlineradio62" value="西" v-model="house.orientation"/>
              <label class="form-check-label" for="inlineradio62">西</label>
            </div>
            <div class="form-check form-check-inline">
              <input class="form-check-input" type="radio" name="orientation" id="inlineradio63" value="南" v-model="house.orientation"/>
              <label class="form-check-label" for="inlineradio63">南</label>
            </div>
            <div class="form-check form-check-inline">
              <input class="form-check-input" type="radio" name="orientation" id="inlineradio64" value="北" v-model="house.orientation"/>
              <label class="form-check-label" for="inlineradio64">北</label>
            </div>
          </div>
          <div class="search-check-box col-md-10 offset-md-1">
            <span><b>楼层：</b></span>

            <div class="form-check form-check-inline">
              <input class="form-check-input" type="radio" name="floor" id="inlineradio71" value="1" v-model="house.floor"/>
              <label class="form-check-label" for="inlineradio71">低楼层</label>
            </div>
            <div class="form-check form-check-inline">
              <input class="form-check-input" type="radio" name="floor" id="inlineradio72" value="2" v-model="house.floor"/>
              <label class="form-check-label" for="inlineradio72">中楼层</label>
            </div>
            <div class="form-check form-check-inline">
              <input class="form-check-input" type="radio" name="floor" id="inlineradio73" value="3" v-model="house.floor"/>
              <label class="form-check-label" for="inlineradio73">高楼层</label>
            </div>
          </div>
          <div class="search-check-box col-md-10 offset-md-1">
            <span><b>电梯：</b></span>

            <div class="form-check form-check-inline">
              <input class="form-check-input" type="radio" name="elvator" id="inlineradio81" value="0" v-model="house.elvator"/>
              <label class="form-check-label" for="inlineradio81">有电梯</label>
            </div>
            <div class="form-check form-check-inline">
              <input class="form-check-input" type="radio" name="elvator" id="inlineradio82" value="1" v-model="house.elvator"/>
              <label class="form-check-label" for="inlineradio82">无电梯</label>
            </div>
          </div>
          <div class="search-check-box col-md-10 offset-md-1">
            <a  @click="reset" href="javascript:void(0)"><b>点我重置</b>🔄</a>
          </div>

        </form>
      </div>
    </div>
  </div>

  <!--<div class="more-check-link col-md-2 offset-md-5">
    <small><a id="more-check-btn" style="cursor:pointer">查看更多↓</a></small>
    </div>-->
  <hr>
  <div class="search-result-box row col-md-10 offset-md-1">
    <div class="search-result-nav col-md-8">
      <div class="btn-group col-md-9 " role="group" aria-label="btn-nav">
        <button type="button" class="btn btn-success nav-button col-md-2"><b>房源列表</b></button>
        <button type="button" class="btn btn-success nav-button col-md-2" @click="changePriceSort()">{{priceSort}}</button>
        <button type="button" class="btn btn-success nav-button col-md-2" @click="changeAreaSort()">{{areaSort}}</button>
        <div id="find-house-num">
          已为您找到<span id="house-num">{{house.total}}</span>套好房
        </div>
      </div>
    </div>


    <div class="search-result-list col-md-8">
      <div class="search-result-card" v-for="house in allHouse">
        <div class="card result-card animate__animated animate__flipInX" style="width: 100%;">
          <div class="row no-gutters" @click="goDetail(house.houseId)">
            <div class="col-md-2">
              <a href="#"><img v-bind:src="'https://airent-1303816068.cos.ap-shanghai.myqcloud.com/'+house.firstImg" width="70px" height="30px" class="card-img" alt="图片加载失败"></a>
            </div>
            <div class="col-md-9 offset-md-1">
              <div class="card-body">
                <a href="#">
                  <span><span class="card-title">{{house.houseResource}}</span>&nbsp;&nbsp;</span><span class="badge badge-secondary">精品房屋</span>&nbsp;<span class="badge badge-secondary">平价实惠</span>
                </a>
                <p class="card-text"><small class="text-muted">{{house.content}}</small></p>
                <div class="card-text row">
                  <div class="col-md-2"><small class="text-muted">{{house.houseCity}}</small></div>
                  <div class="col-md-2"><small class="text-muted">{{house.villageName}}</small></div>
                  <div class="col-md-2"><small class="text-muted">{{house.houseMeasure}}m<sup>2</sup></small></div>
                  <div class="col-md-2"><small class="text-muted">朝向{{house.orientation}}</small></div>
                  <div class="col-md-2"><small class="text-muted">{{house.houseTypeId}}</small></div>
                  <div class="col-md-2 offset-md-1"><small class="text-muted"><a href="#" class="card-link">
                    <!--<i class="fa fa-heart-o collect-icon">&nbsp;收藏</i>-->
                  </a></small></div>
                </div>
                <div class="mark-house-price">{{house.rentPrice}}元/月</div>
              </div>
            </div>
          </div>
        </div>
      </div>


      <div id="house-page" ref="housepage">
        <nav aria-label="Page navigation example">
          <ul class="pagination">
            <li class="page-item"><a class="page-link" href="javascript:void(0)" @click="go(1)">首页</a></li>
            <li class="page-item"><a class="page-link" href="javascript:void(0)"  @click="go(house.prePage)">&laquo;</a></li>
            <li class="page-item" v-for="pageNow in house.pages">
              <a class="page-link" href="javascript:void(0)"  @click="go(pageNow)">{{pageNow}}</a>
            </li>
            <li class="page-item"><a class="page-link" href="javascript:void(0)"  @click="go(house.nextPage)">&raquo;</a></li>
            <li class="page-item"><a class="page-link" href="javascript:void(0)" @click="go(house.pages)">尾页</a></li>
          </ul>
        </nav>
      </div>
    </div>

    <div class="col-md-4 right-card">
      <div class="card map-search row">
        <a th:href="@{/map/areaCheck}"><img id="map-img" class="card-img" th:src="@{/airent/imgs/map.jpg}" alt="图片加载失败"></a>
        <div class="card-img-overlay">
          <a th:href="@{/map/areaCheck}"><svg class="bi bi-geo-alt" style="margin-top:-30px;margin-bottom:20px" width="3em"
                                              height="3em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd"
                  d="M8 16s6-5.686 6-10A6 6 0 0 0 2 6c0 4.314 6 10 6 10zm0-7a3 3 0 1 0 0-6 3 3 0 0 0 0 6z" />
          </svg></a>
          <a th:href="@{/map/areaCheck}">
            <h3 class="card-title">地图找房</h3>
          </a>
          <a th:href="@{/map/areaCheck}">
            <p class="card-text">使用地图帮您精准定位房源</p>
          </a>
        </div>
      </div>

      <div class="card recommend-list row">
        <div class="recommend-title">
          <span>
            <h4>推荐房源</h4>
          </span>
        </div>
        <div class="card recommend-card col-md-8 offset-md-2" style="width: 18rem;">
          <a href="#"><img class="card-img-top" th:src="@{/airent/imgs/house.png}" alt="图片加载失败"></a>
          <div class="card-body">
            <a href="#">
              <h6 class="card-title"><b>别墅</b></h6>
            </a>
            <div><a href="#" class="card-link"><span style="color: red;">1500元/月</span></a></div>
          </div>
        </div>

      </div>


    </div>
  </div>
  <div id="container" style="display: none;"></div>
  <!-- 引入底部 -->
  <div th:replace="~{food/bottombar::topBar}"></div>
</div>

<script th:src="@{/airent/plugins/jquery/jquery.min.js}"></script>
<script th:src="@{/airent/plugins/bootstrap/bootstrap-4.4.1-dist/js/bootstrap.min.js}"></script>
<script>
  let houseCity = '[[${param.city}]]';
  var vueApp = new Vue({
    //获得托管区域
    el: "#app",
    data: {
      allHouse:[],
      areas: [],
      priceSort:"价格升序",
      areaSort:"面积升序",
      house: {
        searchHouse:"",
        houseArea: "",
        rentType: "",
        rentPrice: "",
        houseTypeId: "",
        orientation: "",
        floor:0,
        elvator:2,
        pageNum:1,
        pages:0,
        total:0,
        prePage:0,
        nextPage:0
      }
    },
    created: function () {
      /*var city = "上海市";*/
      var str = "";
      var url = "/city/cityData";
      $.ajax({
        url: url,
        type: "GET",
        dateType: "json",
        success: function (d) {
          for (var i=0;i<d.length;i++){
            if (d[i].name==houseCity){
              vueApp.areas = d[i].area
            }
          }
        }
      });
    },
    mounted: function () {
      this.search();
      console.info(this.$refs.housepage)
    },
    methods:{
      search:function () {
        //alert(this.house.searchHouse)
        $.ajax({
          url: "/search/searchHouse",
          type: "post",
          dateType: "json",
          data:{
            searchHouse:this.house.searchHouse,
            houseCity:houseCity,
            houseArea: this.house.houseArea,
            rentType: this.house.rentType,
            rentPrice: this.house.rentPrice,
            houseTypeId: this.house.houseTypeId,
            orientation: this.house.orientation,
            floor: this.house.floor,
            elvator: this.house.elvator,
            pageNum:this.house.pageNum
          },
          success: function (d) {
            //console.log(d.list);
            vueApp.allHouse=d.list;
            vueApp.house.pageNum=d.pageNum;
            vueApp.house.pages=d.pages;
            vueApp.house.total=d.total;
            vueApp.house.prePage=d.prePage;
            vueApp.house.nextPage=d.nextPage
          }
        });
      },
      reset: function () {
        this.house.houseArea = "",
        this.house.rentType="",
        this.house.rentPrice="",
        this.house.houseTypeId="",
        this.house.orientation="",
        this.house.floor=0,
        this.house.elvator=2
      },
      go:function (now) {
        //alert(now);
        //alert(this.house.searchHouse)
        $.ajax({
          url: "/search/searchHouse",
          type: "post",
          dateType: "json",
          data:{
            searchHouse:vueApp.house.searchHouse,
            houseCity:houseCity,
            houseArea: vueApp.house.houseArea,
            rentType: vueApp.house.rentType,
            rentPrice: vueApp.house.rentPrice,
            houseTypeId: vueApp.house.houseTypeId,
            orientation: vueApp.house.orientation,
            floor: vueApp.house.floor,
            elvator: vueApp.house.elvator,
            pageNum:now
          },
          success: function (d) {
            console.log(d);
            vueApp.allHouse=d.list;
            vueApp.house.pageNum=d.pageNum;
            vueApp.house.pages=d.pages;
            vueApp.house.total=d.total;
            vueApp.house.prePage=d.prePage;
            vueApp.house.nextPage=d.nextPage
          }
        });
      },
      changePriceSort:function () {
        if (vueApp.priceSort=="价格升序"){
          vueApp.priceSort="价格降序"
        } else{
          vueApp.priceSort="价格升序"
        }
        $.ajax({
          url: "/search/searchHouse",
          type: "post",
          dateType: "json",
          data:{
            searchHouse:vueApp.house.searchHouse,
            houseCity:houseCity,
            houseArea: vueApp.house.houseArea,
            rentType: vueApp.house.rentType,
            rentPrice: vueApp.house.rentPrice,
            houseTypeId: vueApp.house.houseTypeId,
            orientation: vueApp.house.orientation,
            floor: vueApp.house.floor,
            elvator: vueApp.house.elvator,
            pageNum:vueApp.house.pageNum,
            priceSort:vueApp.priceSort,
          },
          success: function (d) {
            //console.log(d.list);
            vueApp.allHouse=d.list;
            vueApp.house.pageNum=d.pageNum;
            vueApp.house.pages=d.pages;
            vueApp.house.total=d.total;
            vueApp.house.prePage=d.prePage;
            vueApp.house.nextPage=d.nextPage
          }
        });
      },
      changeAreaSort:function () {
        if (vueApp.areaSort=="面积升序"){
          vueApp.areaSort="面积降序"
        } else{
          vueApp.areaSort="面积升序"
        }
        $.ajax({
          url: "/search/searchHouse",
          type: "post",
          dateType: "json",
          data:{
            searchHouse:vueApp.house.searchHouse,
            houseCity:houseCity,
            houseArea: vueApp.house.houseArea,
            rentType: vueApp.house.rentType,
            rentPrice: vueApp.house.rentPrice,
            houseTypeId: vueApp.house.houseTypeId,
            orientation: vueApp.house.orientation,
            floor: vueApp.house.floor,
            elvator: vueApp.house.elvator,
            pageNum:vueApp.house.pageNum,
            areaSort:vueApp.areaSort
          },
          success: function (d) {
            //console.log(d.list);
            vueApp.allHouse=d.list;
            vueApp.house.pageNum=d.pageNum;
            vueApp.house.pages=d.pages;
            vueApp.house.total=d.total;
            vueApp.house.prePage=d.prePage;
            vueApp.house.nextPage=d.nextPage
          }
        });
      },
      goDetail:function (hid) {
        location.href="/houseUser/detail?houseId="+hid;
      }
    }

  })

</script>
</body>

</html>
